<template>
	<div class="nav-box">
		<ul class="nav-box">
			<li>
				<img class="link-ico" src="../../static/images/ico/nav-ico-01.png"/>
				小程序
				<div class="nav-item-pic">
					<img src="../../static/images/bg/wy_ewm_300px.png"/>
					<span>扫码关注官方小程序</span><br/>
					<span>参与更多优惠活动</span>

				</div>
			</li>
			<li @click="callQQService">
				<img class="link-ico" src="../../static/images/ico/nav-ico-03.png"/>
				<a class="link-btn" target="_blank" @href="callQQService()">官方客服</a>
			</li>
			<li @click="goTop()">
				<img class="link-ico" src="../../static/images/ico/nav-ico-02.png"/>
				返回顶部
			</li>
		</ul>
	</div>
</template>

<script>
  import { getContactInfo  } from '/api/goods'
	export default {
		data() {
			return {
        qqCharNum:'',
			}
		},
		methods: {
			goTop(){
				let top = document.documentElement.scrollTop || document.body.scrollTop;
				// 实现滚动效果 ，平滑过渡
				const timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
					if(top <= 0) {
						clearInterval(timeTop);
					}
				}, 10);
			},
			callQQService(){
				var aa = document.createElement("a");
				aa.target="_blank";
        if (this.qqCharNum.length > 15) {//长度超过15位，认为是53KF
          aa.href = this.qqCharNum;
        } else {
          aa.href = "http://wpa.qq.com/msgrd?v=3&uin="+this.qqCharNum+"&site=qq&menu=yes";
        }

				aa.click();
			},
       getQqContactList() {
        getContactInfo({isMain: 1, sellerOrBuyer: 'buyer', type: 'QQ'}).then(response => {
          this.qqCharNum = response.data.contact;
        });
      }
		},
		mounted(){

		},
    created() {
      this.getQqContactList();
    },
	}
</script>

<style scoped>
.nav-box{
	position: fixed;
	top: 380px;
	right: 20px;
	width: 70px;
	box-shadow: 0px 0px 10px 2px rgba(214, 213, 213, 0.9);
	z-index: 9999999;
}
.nav-box li{
	height: 70px;
    text-align: center;
    border-bottom: 1px solid #E5E5E5;
    background-color: white;
    z-index: 99;
    padding: 5px;
}
.nav-box li:last-child{
	border-bottom: 0;
}
.nav-box li:hover{
	background-color: #EDEDED;
	cursor: pointer;
}
.nav-box li:hover .nav-item-pic{
	right: 71px;
    width: 120px;
    height: 150px;
    visibility: visible;
	transition: 0.5s;
}
.link-btn{
	color: #666666;
}
.link-ico{
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 30px;
}
.nav-item-pic{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 0;
    height: 0px;
    overflow: hidden;
    padding: 5px;
    font-size: 12px;
    background-color: white;
    color: #666666;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    visibility: hidden;
    z-index: -1;
}
.nav-item-pic span{
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>
